@import url(https://fonts.googleapis.com/css?family=Exo:100,200,400);

body { margin: 0; padding: 0; background: #fff; color: #fff; font-family: Arial; font-size: 12px; background-color: #34495e !important; }
body, input { font-family: 'Exo', sans-serif; }
.side-brand { position: absolute; top: calc(50% - 10px); right: calc(50% - -50px); z-index: 2; }
    .side-brand img { width: 170px; height: 130px; position: relative; top: -28px; }

.top-brand { position: absolute; z-index: 2; top: calc(50% - 300px); left: calc(50% - 84px); }
    .side-brand div, .top-brand div { float: left; color: #e5d8B0; font-size: 35px; font-weight: 200; }
        .side-brand div span, .top-brand div span { color: #e05850 !important; }
.login { position: absolute; top: calc(50% - 75px); left: calc(50% - 50px); height: 150px; padding: 10px; }
.login-top-brand { left: calc(50% - 143px) !important; }
.login input[type=text], .login input[type=password] { width: 250px; height: 30px; background: transparent; border: 1px solid rgba(255,255,255,0.6); border-radius: 2px; color: #fff; font-size: 16px; font-weight: 400; padding: 4px; margin-top: 10px; }

.login input[type=submit] { width: 260px; height: 35px; background: #fff; border: 1px solid #fff; cursor: pointer; border-radius: 2px; color: #a18d6c; font-size: 16px; font-weight: 400; padding: 6px; margin-top: 10px; }
    .login input[type=submit]:hover { opacity: 0.8; }
    .login input[type=submit]:active { opacity: 0.6; }
.login input[type=text]:focus, .login input[type=password]:focus { outline: none; border: 1px solid rgba(255,255,255,0.9); }
 
.login input[type=submit]:focus { outline: none; }
::-webkit-input-placeholder { color: rgba(255,255,255,0.6); }
::-moz-input-placeholder { color: rgba(255,255,255,0.6); }

.toggle-password-view { color: #e05850 !important; left: -30px; position: relative; top: 2px; }

.loader-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1200; background: #fff; }
.loader { display: none; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #34495e; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }
    .loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e05850; /*! -webkit-animation: spin 3s linear infinite; */ animation: spin 3s linear infinite; }
    .loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ffb367; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; }

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
}